<template>
<div class="box-login">
<span class="qxi" @click="tui">取消</span>
 <div class="login-top">
    <span>不忘初心</span>
    <p>QQ音乐</p>
 </div>
 <div class="login-denglu">
<van-form validate-first  @submit="onSubmit">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
    v-model="phone"
    clearable
    label="手机号"
    name="phone"
    placeholder="请输入手机号码"
    :rules="[{ pattern }]"
  />
  <!-- 通过 validator 进行函数校验 -->
 <van-field
  v-model="sms"
  name="sms"
  center
  clearable
  label="短信验证码"
  placeholder="请输入短信验证码"
>
  <template #button>
    <div class="msm" @click="msm">发送验证码</div>
  </template>
</van-field>
  <!-- 通过 validator 进行异步函数校验 -->
  <van-field
    v-model="password"
    clearable
    name="password"
    label="密码"
    placeholder="密码"
    :rules="[{}]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">
      登陆
    </van-button>
  <div>
  </div>
  </div>
</van-form>
<div class="shenma">
  <van-checkbox v-model="checked" icon-size="20px" checked-color="#f40">请勾选<i>《用户服务协议》</i></van-checkbox>
  <!-- <span>请勾选<i>《用户服务协议》</i><span> -->
  <p @click="$router.push('/register')">点击立即注册</p>
</div>
 </div>
</div>
</template>

<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import { caPtcha } from '@/api'
import { Form, Toast, Field, Button, Checkbox, CheckboxGroup } from 'vant'
Vue.use(Toast)
Vue.use(Form)
Vue.use(Button)
Vue.use(Field)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
export default {
  name: 'login',
  data () {
    return {
      phone: '',
      sms: '',
      password: '',
      pattern: /\d{6}/,
      checked: false
    }
  },
  created () {
    // console.log('我想看状态', this.$store)
  },
  methods: {
    ...mapActions('user', [
      'loginActions'
    ]),
    tui () {
      this.$router.push('Music')
    },
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator (val) {
      return /1\d{10}/.test(val)
    },
    onSubmit (values) {
      Toast.loading('验证中...')
      console.log(this.phone)
      console.log(this.password)
      // 传入手机号码和密码
      this.loginActions({
        phone: this.phone,
        password: this.password
      }).then(res => {
        const code = this.$store.state.user.login_code
        console.log(code)
        if (code === 200) {
          Toast('登录成功')
          localStorage.setItem('loginState', 'ok')
          this.$router.push('/Music')
        } else {
          Toast('登陆失败')
        }
      })
    },
    msm () {
      console.log('你可以发送验证码了')
      caPtcha({
        phone: this.phone
      }).then(res => {
        Toast('请及时查看验证码')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.van-icon-success{
  border: 1px solid red;
}
.van-form{
  opacity: 0.8;
}
.van-cell{
  margin-top: 2px;
}
.van-button--info{
  border: 1px solid #ffcd32;
  background: #ffcd32;
}
.msm{
  border: 1px solid #ffcd32;
  width: 1rem;
  height: 0.3rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.12rem;
  color: #ffcd32;
}
 .qxi{
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    font-size: 0.1rem;
}
.box-login{
  background:url("./timg.jpg")no-repeat;
  background-size:cover;
  position: relative;
  height: 100%;
  .login-top{
    position: absolute;
    top: 0.2rem;
    margin-left: 25%;
    border: 1.5px solid #056948;
    border-radius: 15rem;
    width: 2rem;
    text-align: center;
    span{
      color: #056948;
    }
    p{
      font-size: 0.3rem;
      color: #056948;
    }
  }
  .login-denglu{
    position: absolute;
    bottom: 1rem;
    width: 100%;
    padding: 0.1rem;
  }
  .shenma{
    display: flex;
    justify-content: space-between;
    padding:0 0.2rem;
    font-size: 0.1rem;
  }
}
</style>
